<template>
  <el-card shadow="hover" class="f-carousel-item-card-body" :style="{ backgroundImage: 'url(' + backgroundImage + ')'}"
           :body-style="{ 'padding': '0px' ,'height': (height-40*4)/2 + 'px'}">
    <el-row type="flex" :align="align" style="height: 100%">
      <el-col :span="24" >
        <el-row type="flex" :justify="justify">
          <el-col :span="20" :push="push" :style="{textAlign: textAlign}">
            <span class="f-carousel-item-card-title"><count-to v-if="subCount !== 0" :start-val="0" :end-val="subCount"/>{{ title }}</span>
          </el-col>
        </el-row>
        <el-row type="flex" :justify="justify">
          <el-col :span="20" :push="push"  :style="{textAlign: textAlign}">
            <span class="f-carousel-item-card-title2">{{ subTitle }}</span>
          </el-col>
        </el-row>
        <el-row type="flex" :justify="justify">
          <el-col :span="20" :push="push"  :style="{textAlign: textAlign}">
            <el-button type="text" class="f-carousel-item-card-btn">{{ btnTitle }}</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
  import CountTo from 'vue-count-to'
  export default {
    name: 'index',
    components: {
      CountTo
    },
    data () {
      return {
        push: 0
      }
    },
    props: {
      height: {
        type: Number,
        default: 200
      },
      backgroundImage: {
        type: String,
        default: ''
      },
      align: {
        type: String,
        default: 'middle'
      },
      justify: {
        type: String,
        default: 'start'
      },
      textAlign: {
        type: String,
        default: 'left'
      },
      title: String,
      subTitle: String,
      subCount: {
        type: Number,
        default: 0
      },
      btnTitle: String
    },
    mounted () {
      this.$nextTick(() => {
        if (this.justify === 'start') {
          this.push = 4
        } else if (this.justify === 'end') {
          this.push = -4
        }
      })
    }
  }
</script>

<style scoped>
  /** 卡片底色透明色*/  /** 卡片背景图片*/
  .f-carousel-item-body .f-carousel-item-card-body{
    background-color: transparent !important;
    border-radius: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }

  .f-carousel-item-body .f-carousel-item-card-title, .f-carousel-item-card-btn{
    font-size: 28px;
  }
  .f-carousel-item-body .f-carousel-item-card-title2{
    font-size: 52px;
  }
</style>
